<script setup lang="ts">
import { ref, onMounted } from 'vue'
import BlogList from './components/BlogList.vue'
import BlogDetail from './components/BlogDetail.vue'
import Header from './components/Header.vue'
import Sidebar from './components/Sidebar.vue'

interface Blog {
  id: number
  title: string
  content: string
  excerpt: string
  author: string
  publishDate: string
  tags: string[]
  readTime: number
  views: number
  likes: number
}

const currentView = ref<'list' | 'detail'>('list')
const selectedBlog = ref<Blog | null>(null)
const blogs = ref<Blog[]>([])

// Mock data - replace with API calls
const mockBlogs: Blog[] = [
  {
    id: 1,
    title: "Vue 3 组合式 API 深度解析",
    content: "Vue 3 的组合式 API 为开发者提供了更灵活、更强大的组件逻辑组织方式。通过 setup 函数，我们可以更好地复用逻辑，提高代码的可维护性...",
    excerpt: "深入探讨 Vue 3 组合式 API 的核心概念和最佳实践",
    author: "张三",
    publishDate: "2024-01-15",
    tags: ["Vue", "JavaScript", "前端"],
    readTime: 8,
    views: 1250,
    likes: 89
  },
  {
    id: 2,
    title: "TypeScript 在大型项目中的应用",
    content: "TypeScript 作为 JavaScript 的超集，为大型前端项目提供了类型安全和更好的开发体验。本文将分享在实际项目中使用 TypeScript 的经验...",
    excerpt: "分享 TypeScript 在大型前端项目中的最佳实践和踩坑经验",
    author: "李四",
    publishDate: "2024-01-12",
    tags: ["TypeScript", "前端", "工程化"],
    readTime: 12,
    views: 980,
    likes: 67
  },
  {
    id: 3,
    title: "微前端架构设计与实现",
    content: "随着前端应用越来越复杂，微前端架构成为了解决大型团队协作和代码维护问题的重要方案。本文将详细介绍微前端的实现方式...",
    excerpt: "从零开始构建微前端架构，解决大型前端应用的协作难题",
    author: "王五",
    publishDate: "2024-01-10",
    tags: ["微前端", "架构", "工程化"],
    readTime: 15,
    views: 2100,
    likes: 156
  }
]

const showBlogDetail = (blog: Blog) => {
  selectedBlog.value = blog
  currentView.value = 'detail'
}

const backToList = () => {
  currentView.value = 'list'
  selectedBlog.value = null
}

onMounted(() => {
  blogs.value = mockBlogs
})
</script>

<template>
  <div class="app">
    <Header @back="backToList" :show-back="currentView === 'detail'" />
    
    <div class="main-container">
      <Sidebar v-if="currentView === 'list'" :blogs="blogs" />
      
      <main class="content">
        <BlogList 
          v-if="currentView === 'list'" 
          :blogs="blogs" 
          @select-blog="showBlogDetail" 
        />
        <BlogDetail 
          v-else-if="currentView === 'detail'" 
          :blog="selectedBlog" 
          @back="backToList"
        />
      </main>
    </div>
  </div>
</template>

<style scoped>
.app {
  min-height: 100vh;
  background: linear-gradient(135deg, #6b9121 0%, #18d0f1 100%);
}

.main-container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  gap: 20px;
}

.content {
  flex: 1;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
    padding: 10px;
  }
}
</style>
